import {
  defineStore
} from 'pinia'
import {
  findSelectOption
} from "@/hooks/drag/findSelectOption"
const defaultBreadCrumb = {
  index: 'dashboard',
  icon: 'Odometer',
  title: '首页',
  path: '/home/index',
  componentName: 'HomeIndex'
}

export const userInfo = defineStore('userInfo', {
  state: () => {
    return {
      isLogin: false,
      data:{} // 账号信息
    }
  },
  actions: {
    updateIsLogin(value) {
      this.isLogin = value
    },
    updateData(value) {
      this.data = value
    }
  },
  // 将值存入sessionstore 防止刷新页面丢失
  persist: {
    enabled: true,
    // key: 'my_user',
    // storage: localStorage,
  }
})
export const globalColor = defineStore('globalColor', {
  state: () => {
    return {
      color: '#0C819F',
      colorObj:{},
      predefineColorList: []
    }
  },
  actions: {
    updateColor(value) {
      this.color = value
    },
    updateColorObj(value) {
      this.colorObj = value
    },
    updateColorList(value) {
      this.predefineColorList.push(value)
      this.predefineColorList = [...new Set(this.predefineColorList)]
      console.log(this.predefineColorList);
    },
  },
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'globalColor',
        storage: localStorage,
      },
    ],
  }
})
// 路由数据
export const routerData = defineStore('routerData', {
  state: () => {
    return {
      data: []
    }
  },
  actions: {
    updateData(value) {
      this.data = value
    }
  },
})
// 页面展开/关闭
export const isCollapse = defineStore('isCollapse', {
  state: () => {
    return {
      isCollapse: false
    }
  },
  actions: {
    updateisCollapse(value) {
      this.isCollapse = value
    }
  },
    persist: {
      enabled: true,
    }
})
export const breadcrumbList = defineStore('breadcrumbList', {
  state: () => {
    return {
      data: [],
      list: [defaultBreadCrumb]
    }
  },
  // 面包屑
  getters: {
    // filterData: (state) => {
    //   const tabName = menuInfo()
    //   let selectData = [{
    //     title: 'Dashboard',
    //     index: 'dashboard',
    //     path: '/dashboard',
    //     close: false
    //   }]
    //   let map = new Map()
    //   // 去重
    //   let newData = state.data.filter(item => {
    //     return !map.has(item.index) && map.set(item.index)
    //   })
    //   newData = [...selectData, ...newData]
    //   let data = newData.find(item => item.index === tabName.name)
    //   return [data]
    // },
    // tabs
    selectMenu(state) {
      // 默认选择
      let selectData = [{
        title: 'Dashboard',
        index: 'dashboard',
        close: false
      }]
      let map = new Map()
      let newData = state.data.filter(item => {
        return !map.has(item.index) && (item.title !== 'Dashboard' && map.set(item.index))
      })
      selectData = [...selectData, ...newData]
      return selectData
    }
  },
  /*  pattern : 判断是新增还是移除
   *  add : 新增tab
   *  remove: 移除tab
   */
  actions: {
    updateBreadcrumbList(value, pattern) {
      // 调用其他state
      const tabName = menuInfo()
      // 默认名称
      const defaultName = 'dashboard'
      // 默认路径
      const defaultPath = '/dashboard'
      if (value.path === '/' || value.path === '/login' || value.path === '/index') return
      if (pattern === 'add') {
        // 避免重复添加
        if (this.data.length === 0) {
          this.data.push(value)
        } else {
          let isHas = this.data.some(item => item.index === value.index)
          isHas || this.data.push(value)
        }
      } else {
        this.data.forEach((item, index) => {
          if (item.index === value) {
            // 关闭的是最后一个tab页 删除后默认选择前一个
            if (this.data.length > 0 && tabName.name === value && index === this.data.length - 1) {
              if (index - 1 >= 0) {
                tabName.updateMenuName(this.data[index - 1].index)
                tabName.updatePath(this.data[index - 1].path)
              } else {
                tabName.updateMenuName(defaultName)
                tabName.updatePath(defaultPath)
              }
              this.data.splice(index, 1)
              return
            }
            // 关闭的不是当前选中的tab页,但是是最后一个,删除最后一个tab页不改变选中页
            if (this.data.length > 0 && tabName.name !== value && index === this.data.length - 1) {
              tabName.updateMenuName(tabName.name)
              tabName.updatePath(tabName.name)
              this.data.splice(index, 1)
              return
            }
            // 随机关闭非当前选中tab页
            if (this.data.length > 0 && tabName.name !== value && index !== this.data.length - 1) {
              tabName.updateMenuName(tabName.name)
              tabName.updatePath(tabName.name)
              this.data.splice(index, 1)
              return
            }
          }
        })
      }
    },
    updateFilterData(value) {
      this.list = [defaultBreadCrumb, ...value]
    },
    removeBreadcrumbList(name){
        const tabName = menuInfo()
        this.data = this.data.filter(item=>item.index !== name)
        if(this.data.length){
          tabName.updateMenuName(this.data[this.data.length - 1].index)
          tabName.updatePath(this.data[this.data.length - 1].path)
        }else{
          // tabName.updatePath('/:catchAll(.*)')
          tabName.updateMenuName('404')
        }
    },
    updateLastList(value) {
      this.list[this.list.length - 1] = value
    }
  },
  persist: {
    enabled: true,
  }
})
/*
 *menuInfo:菜单信息
  name:菜单名称2
  path:菜单路由(关闭tab页时使用)
 */
export const menuInfo = defineStore('menuName', {
  state: () => {
    return {
      name: '',
      path: '/',
      list:[]
    }
  },
  actions: {
    updateMenuName(value) {
      this.name = value
    },
    updatePath(value) {
      this.path = value
    },
    updateList(value) {
      this.list = value
    }
  },
  persist: {
    enabled: true,
  }
})
/*
 *pageSet:页面设置(右侧隐藏任务栏)
  isUnfold:是否展示设置栏
  tabShow:是否显示tab
  headerFix:头部是否固定
 */
export const pageSet = defineStore('pageSet', {
  state: () => {
    return {
      isUnfold: false,
      tabShow: true,
      headerFix: false,
      layoutComponent:{},
    }
  },
  actions: {
    updateisUnfold(value) {
      this.isUnfold = value
    },
    updateLayoutComponent(value) {
      this.layoutComponent = value
    },
    // updateTabShow(value) {
    //   this.tabShow = value
    // },
    // updateHeaderFix(value) {
    //   this.headerFix = value
    // },
  },
  persist: {
    enabled: true,
  }
})
/*
 *
 */
export const dragComponentsName = defineStore('info', {
  state: () => {
    return {
      componentsInfo: [{
          classify: '布局'
        },
        {
          name: '分栏布局',
          type: 'layout_subfield',
          icon: '',
          componentName: 'LayoutSubfield'
        },
        {
          classify: '基础组件'
        },
        {
          name: '单行文本输入',
          type: 'basicInput',
          icon: '',
          componentName: 'BasicInput'
        },
        {
          name: '多行文本输入',
          type: 'basic_moreInput',
          icon: '',
          componentName: 'BasicMoreInput'
        },
        {
          name: '数字输入框',
          type: 'basic_numberInput',
          icon: '',
          componentName: 'BasicNumberInput'
        },
        {
          name: '金额输入框',
          type: 'basic_moneyInput',
          icon: '',
          componentName: 'BasicMoneyInput'
        },
        {
          name: '下拉框',
          type: 'select',
          icon: '',
          componentName: 'Select'
        },
        {
          name: '下拉多选框',
          type: 'selectMore',
          icon: '',
          componentName: 'SelectMore'
        },
        {
          name: '单选框',
          type: 'radio',
          icon: '',
          componentName: 'Radio'
        },
      ]
    }
  },
})
/*
 *
 */
export const componentsNameList = defineStore('list', {
  state: () => {
    return {
      list: [],
      index:undefined,
      selectOption:{}
    }
  },
  actions:{
    updateList(value){
      if(this.list.length == 0){
        this.list.push(value)
      }else{
        let options = findSelectOption(this.list, value.id)
        if(options){
          options = value
        }else{
          this.list.push(value)
        }
      }
    },
    updateSelectOption(option){
      console.log(option);
      this.selectOption = option
    },
    updateIndex(index){
      this.index = index
    },
    deleteList(index){
      if(this.list.length === 1){
        this.list = []
        this.index = 0
        return
      }
      this.list.splice(index,1)
      // this.index = index - 1
      // this.index = this.list.length - 1
      console.log(this.index);
      this.index = index == 0 ? 1 : this.list.length - 1
    }
  },
    persist: {
      enabled: true,
    }
})